<template >
  <div class="regist">
    <div class="content">
      <div class="left">
        <div class="logo-content">
          <img src="../../assets/login_logo.png" alt="" />
        </div>
        <h1>易联求职校园招聘系统</h1>
        <h1>为了更好的未来</h1>
      </div>
      <div class="right">
        <div class="form">
          <h2>欢迎注册</h2>
          <el-tabs v-model="activeKey" type="card">
            <el-tab-pane name="stu" label="我要找工作">
              <el-form
                ref="registerForm1"
                label-width="80px"
                label-position="left"
                :model="registerForm1"
                :rules="rules1"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input
                    size="mini"
                    v-model="registerForm1.username"
                    auto-complete="off"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    id="password"
                    size="mini"
                    type="password"
                    v-model="registerForm1.password"
                    auto-complete="off"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avator">
                  <div v-if="registerForm1.avator" class="img-blocks">
                    <div style="position: relative">
                      <img :src="registerForm1.avator" style="width: 80px" />
                      <i @click="deleteImg()" class="el-icon-circle-close"></i>
                    </div>
                  </div>
                  <el-upload
                    v-if="!registerForm1.avator"
                    class="avatar-uploader"
                    :action="'/upload'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="boss" label="我要招人">
              <el-form
                ref="registerForm2"
                label-width="80px"
                label-position="left"
                :model="registerForm2"
                :rules="rules2"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input
                    size="mini"
                    v-model="registerForm2.username"
                    auto-complete="off"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" class="pass">
                  <el-input
                    id="password"
                    size="mini"
                    type="password"
                    v-model="registerForm2.password"
                    auto-complete="off"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avator">
                  <div v-if="registerForm2.avator" class="img-blocks">
                    <div style="position: relative">
                      <img :src="registerForm2.avator" style="width: 80px" />
                      <i @click="deleteImg()" class="el-icon-circle-close"></i>
                    </div>
                  </div>
                  <el-upload
                    v-if="!registerForm2.avator"
                    class="avatar-uploader"
                    :action="'/upload'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <!-- <el-form-item label="公司名称" prop="companyName">
                  <el-input
                    size="mini"
                    v-model="registerForm2.companyName"
                    auto-complete="off"
                    placeholder="请输入公司名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="你的职位" prop="jobName">
                  <el-input
                    size="mini"
                    v-model="registerForm2.jobName"
                    auto-complete="off"
                    placeholder="请输入职位名称"
                  ></el-input>
                </el-form-item> -->
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <div
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <el-button
              id="enterBtn"
              type="primary"
              style="width: 100%"
              @click="register()"
              >注册</el-button
            >
          </div>
          <p>已有账号？ 点击 <router-link style="color: #9aa5df;" to="/login">去登录</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import "./styles.scss";
import {
  getXuelis,
  register,
  getJobExperience
} from '../../service'
export default {
  data() {
    return {
      registerForm1: {
        username: "",
        password: "",
        type: "1",
        avator: "",
        xueli: "",
        subject: "",
      },
      registerForm2: {
        username: "",
        password: "",
        type: "1",
        avator: "",
        companyName: "",
        jobName: "",
      },
      rules1: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        xueli: [
          { required: true, message: "请选择学历", trigger: "blur" },
        ],
        subject: [
          { required: true, message: "请输入专业", trigger: "blur" },
        ],
        avator: [{ required: true, message: "请上传头像", trigger: "blur" }],
        xueli: [{ required: true, message: "请选择", trigger: "blur" }],
        experience: [{ required: true, message: "请选择", trigger: "blur" }],
        subject: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      rules2: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        avator: [{ required: true, message: "请上传头像", trigger: "blur" }],
        companyName: [{ required: true, message: "请输入", trigger: "blur" }],
        jobName: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      activeKey: "stu",
      xuelis: [],
      jobExperiences: []
    };
  },
  methods: {
    register() {
      if (this.activeKey === 'stu') {
        this.$refs['registerForm1'].validate((valid) => {
          if (valid) {
            let params = this.registerForm1;
            register({
              ...params,
              type: 1,
            }).then((data) => {
              if (data.code === 200) {
                this.$message.success("注册成功~");
                this.$refs['registerForm1'].resetFields()
              } else {
                this.$message.error(data.msg[0].msg);
              }
            });
          }
        });
      } else {
        this.$refs['registerForm2'].validate((valid) => {
          if (valid) {
            let params = this.registerForm2;
            register({
              ...params,
              type: 2,
            }).then((data) => {
              if (data.code === 200) {
                this.$message.success("注册成功~");
                this.$refs['registerForm2'].resetFields()
              } else {
                this.$message.error(data.msg[0].msg);
              }
            });
          }
        });
      }
    },
    handleAvatarSuccess(data) {
      if (this.activeKey === 'stu') {
        this.registerForm1.avator = data.url;
      } else {
        this.registerForm2.avator = data.url;
      }
    },
    deleteImg() {
      this.registerForm1.avator = ''
      this.registerForm2.avator = ''
    }
  },
  created() {
    getXuelis().then(res => {
      this.xuelis = res.data || []
    })
    getJobExperience().then(res => {
      this.jobExperiences = res.data || []
    })
  }
};
</script>

<style>
::v-deep .el-upload__input {
  display: none !important;
}
h2 {
  margin: 40px 0;
}
</style>


